<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload=function(){
            // 图片轮播
            var pic=['indexpic1.jpg','indexpic2.jpg','indexpic3.jpg','indexpic4.jpg']
            var inner=document.getElementById("inner").getElementsByTagName("img")[0]
            var i=0;
            window.setInterval(function(){
                inner.src="images/"+pic[i];
                i++;
                if(i==3) i=0;
            },1000)
        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    
        a {
            text-decoration: none;
        }
        ul li {
            list-style: none;
        }
       
        #shouye{
            width:100%;
            min-width: 1200px;
            
        }
        #head {
            width: 80%;
            height: 80px;
            background-color: white;
            margin: 0 auto;
            /* background-color: yellow; */
        }
        #logo {
            /* background-color: red; */
            width: 30%;
            height: 80px;
            float: left;
            position: relative;
            left:10px;
        }
        
        #headleft {
            width: 50%;
            float: left;
            height: 80px;
            /* background-color: yellow; */
        }
        #headleft1 {
            height: 80px;
            line-height: 80px;
        }

        #textword {
            width: 250px;
            height: 30px;
        }

        #textsearch {
            width: 50px;
            height: 35px;
            border: 1px solid #ccc;
            background: url(images/serach.jpg);
        }
        /*背景图  */
        #login {
            text-decoration: none;
            color: #407434;
        }
        #login img{
            width:20px;
            height: 80px;
        }
        #headright {
            height: 80px;
            line-height: 80px;
            text-align: center;
        }

        #bodynav {
            width: 100%;
            height: 60px;
            /* background-color: red; */
        }

        #nav {
            width: 80%;
            height: 60px;
            margin: 0 auto;
            /* background-color:pink; */
        }

        #nav li {
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
            width: 20%;
            float: left;
        }

        #nav a {
            color: grey;
            font-weight: bold;
        }

        #nav a:hover {
            color: #407434;
            font-weight: bold;
        }
        /* 图片轮播 */
        #picture {
            width: 80%;
            height: 300px;
            margin: 0 auto;
            overflow: hidden;
            border:1px solid red;
        }
        #picture img {
            width: 1125px;
            height: 300px;
        }
       
        /*  */
        #body{
            width: 100%;
        }
        #navtext{
            width:80%;
            height: 200px;
            margin: 0 auto;
            border: 1px solid red;
        }
        #navtexttop{
            font-size: 20px;
            color: #407434;
            height: 50px;
            line-height: 50px;
            /* background-color: yellow; */
        }
        /* 底部 */
        #bottom{
            width:100%;
            height:150px;
            background-color:#a0bf7c;
        }
        /* 底部第一层 */
        #bottomtext{
            width:80%;
            height: 150px;
            margin: 0 auto;
            background-color:#a0bf7c;
        }
        #bottomleft{
            float: left;
            width:200px;
            height: 150px;
            /* background: yellow; */
            position: relative;
            top:10px;
            
        }
        #bottomleft img{
            width:200px;
            height: 80px;
        }
        #bottomleft span{
            color:grey;
        }
        #bottomright{
            width: 100%-200px;
            height: 150px;
            /* background-color: red; */
            
        }
        #bottomrighttext{
            padding:30px;
            color: white;
            position: relative;
            top:40px;
            left: 30px;
        }
        #bottomrighttext span{
            color:grey;
        }
        #bottomrighttext a{
            text-decoration: none;
            color: white;
            margin-left:15px;
            color:grey;
        }
    </style>
</head>

<body>
    <div id="shouye">
            <div id="head">
                    <div id="logo">
                        <img src="images/logo1.jpg" alt="" width="200px" height="80px">
                    </div>
                    <div id="headleft">
                        <div id="headleft1">
                            <form action="#">
                                <input id="textword" type="text"><input id="textsearch" type="submit" value=" ">
                            </form>
                        </div>
                    </div>
                    <div id="headright">
                        <a href="#" id="login">注册</a>
                        <span>|</span>
                        <a href="#" id="login">登录</a>
                    </div>
                </div>
                <div id="bodynav">
                    <div id="nav">
                        <ul>
                            <li><a href="#">首页</a></li>
                            <li><a href="#">套餐</a></li>
                            <li><a href="#">健康饮食</a></li>
                            <li><a href="#">分享圈</a></li>
                            <li><a href="#">联系我们</a></li>
                        </ul>
                    </div>
                </div>
                <div id="picture">
                    <div id="inner">
                        <img src="" alt="">
                    </div>  
                </div>
                <div id="body">
                    <div id="navtext">
                        <div id="navtexttop">套餐推荐</div>
                        <div>
                            
                        </div>
                    </div>
                    <div id="navtext">
                        <div id="navtexttop">健康饮食</div>
                    </div>
                </div>
                <div id="bottom">
                    <div id="bottomtext">
                        <div id="bottomleft">
                            <img src="images/logo1.jpg" alt=""><br>
                            <span>一年四季，一日三餐</span>
                        </div>
                        <div id="bottomright">
                                <div id="bottomrighttext">
                                    <span>关于恰饭吧</span>
                                    <a href="#">网站介绍</a>
                                    <a href="#">加入我们</a>
                                    <a href="#">联系我们</a>
                                    <a href="#">商务合作</a>
                                    <a href="#">用户协议</a>
                                    <a href="#">隐私政策</a>
                                    <a href="#">网站地图</a>
                                    <a href="#">友情链接</a>
                                </div>
                        </div>
                    </div>
                </div>
    </div>
    
</body>

</html>